<script setup>
import {useRouter, useRoute} from 'vue-router'
import {ref} from 'vue'

import homeIcon from '@/assets/images/icons/home.png'
import homeIconAction from '@/assets/images/icons/home_active.png'
import couponIcon from '@/assets/images/icons/coupon1.png'
import couponIconAction from '@/assets/images/icons/coupon_active.png'
import shoppingCartIcon from '@/assets/images/icons/shoppingCart.jpg'
import shoppingCartIconAction from '@/assets/images/icons/shoppingCart_active.jpg'
import mineIcon from '@/assets/images/icons/mine.png'
import mineIconAction from '@/assets/images/icons/mine_active.png'
import {getToken} from "@/utils/user.js";
import {tabInfoStore} from "@/stores/tabInfo.js"
import {goToWithTmpToken} from "@/utils/url-utils.js";


const tabInfo = tabInfoStore();
const router = useRouter()
const route = useRoute()
const cmStore = import.meta.env.VITE_COMMUNITY_STORE_URL;
const siteCode = import.meta.env.VITE_R29_SITECODE
const routerToClick = (path) => {
  console.log('routerToClick', path)
  if (path === '/store') {

    goToWithTmpToken({path: `${cmStore}/#/mainSite/1/?cooperation=1&siteCode=${siteCode}`})
    return
  }

  router.push(path)
  tabActive.value = path
}

const tabData = ref([
  {
    name: '首页',
    path: '/',
    image: homeIcon,
    image_action: homeIconAction
  },
  {
    name: '商店',
    path: '/store',
    image: couponIcon,
    image_action: couponIconAction
  },
  // {
  //   name: '购物车',
  //   path: '/shoppingCart',
  //   image: shoppingCartIcon,
  //   image_action: shoppingCartIconAction
  // },
  {
    name: '我的',
    path: '/mine',
    image: mineIcon,
    image_action: mineIconAction
  }
])

const tabPath = tabData.value.find((item) => {
  return item.path.indexOf(route.path) !== -1
})

const tabActive = ref(tabPath.path || tabData.value[0].path)
</script>

<template>
  <ul class="tabs" v-if="tabInfo.tabVisible">
    <li
        v-for="(item, index) in tabData"
        :key="index"
        class="tab"
        :class="{ tab_active: tabActive === item.path }"
        @click="()=>{routerToClick(item.path)}"
    >
      <img :src="tabActive === item.path ? item.image_action : item.image" alt=""/>
      <span>{{ item.name }}</span>
    </li>
  </ul>
</template>

<style lang="scss" scoped>
.tabs {
  width: 100vw;
  height: 9rem;
  display: flex;
  align-items: center;
  padding-top: 1rem;
  box-sizing: border-box;

  .tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    color: #666666;
    font-size: 1.2rem;

    img {
      width: 2.2rem;
      height: 2.2rem;
      margin-bottom: .6rem;
    }

    span {
      line-height: 1.4rem;
    }
  }

  .tab_active {
    color: var(--van-primary-color);
  }
}
</style>
